<template>
	<view class="page-container back-white">
		<!-- 自定义导航 -->
		<my-navigation ref="nav" from="publish" pageTitle="选择分类" backColorOpacity="1" @clickBack="backTab"></my-navigation>
		
		<view class="main">
			<!-- 内容区域 -->
			<view class="col-box mb-l">
				<!-- 历史选择 -->
				<view class="row-box sb prow-base">
					<text class="s32 bold">历史选择</text>
					<u-icon class="pall-base" name="trash-fill" color="#999999" size="36" @click="removeHistory()"></u-icon>
				</view>
				<!-- 历史选择 -->
				<view v-if="historyList.length" class="row-box" style="flex-wrap: wrap;">
					<view class="search-box" v-for="(item, index) in historyList" :key="index">
						<view class="search-item history" @tap.stop="clickHistory(item)">{{ item.name }}</view>
					</view>
				</view>
				<view v-else class="row-box pall-base">
					<text class="grey-light">暂无历史选择</text>
				</view>
			</view>
			
			<view class="col-box">
				<!-- 全部分类 -->
				<view class="row-box sb pall-base">
					<text class="s32 bold">全部分类</text>
				</view>
				<!-- 全部分类 -->
				<view v-if="publishCates.length" class="row-box" style="flex-wrap: wrap;">
					<view class="search-box" v-for="(item, index) in publishCates" :key="index">
						<view class="search-item" @tap.stop="clickCate(item)">{{ item.name }}</view>
					</view>
				</view>
				<view v-else class="row-box pall-base">
					<text class="grey-light">暂无分类</text>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<!-- <view class="back-primary radius-circle pall-l back-button row-box center">
			<u-icon name="close" color="#ffffff" size="40" @tap.stop="backTab()"></u-icon>
		</view> -->
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				navHeight: 0, // 导航高度
				historyList: [],  // 历史选择列表
				
				showTime: 0, // 页面打开次数
			}
		},
		computed: {
			...mapState('m_page', ['publishCates']),
			...mapState('m_page', ['beforeChangeTabPage']),
		},
		onLoad() {
			// uni.hideTabBar()
			this.navHeight = this.$refs.nav.navHeight
			// 获取选择历史
			this.historyList = JSON.parse(uni.getStorageSync('historyList')) || []
		},
		onShow() {
			if (this.showTime) {
				// 获取选择历史
				this.historyList = JSON.parse(uni.getStorageSync('historyList')) || []
			}
			this.showTime += 1
			// 设置底部tabbar消息角标
			this.setBadge()
		},
		methods: {
			// 返回前一页
			backTab() {
				uni.switchTab({
					url: this.beforeChangeTabPage
				})
			},
			
			// 点击了分类
			clickCate(item) {
				uni.navigateTo({
					url: `/pages/subPackage/platform/publish/publish?cate=${JSON.stringify(item)}`
				})
				let ids = this.historyList.map(item => item.id)
				if (ids.indexOf(item.id) == -1) {
					this.historyList.push(item)
					if (this.historyList.length>10) this.historyList.unshift()
					uni.setStorageSync('historyList', JSON.stringify(this.historyList))
				}
			},
			// 点击选择历史
			clickHistory(item) {
				uni.navigateTo({
					url: `/pages/subPackage/platform/publish/publish?cate=${JSON.stringify(item)}`
				})
			},
			// 清空选择历史
			removeHistory() {
				uni.showModal({
					// title: '提示',
					content: '确定删除全部历史记录？',
					confirmColor: this.primaryColor,
					success: (res) => {
						if (res.confirm) {
							this.historyList = []
							uni.removeStorageSync('historyList')
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 160rpx;
	}
	
	.main {
		padding-top: 20rpx;
	}
	// 搜索项
	.search-box {
		padding: 20rpx;
	}
	.search-item {
		padding: 0 20rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		text-align: center;
		color: $uni-color-primary;
		background: $uni-bg-color-primary-10;
		// border: 2rpx solid $uni-text-color-grey-light;
		&.history {
			color: $uni-text-color-grey-dark;
			background: $uni-bg-color-grey;
		}
	}
	.back-button {
		width: fit-content;
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
